<template>
	<!-- 我的地址页 -->
	<view class="container">
		<!-- 我的地址 -->
		<view class="MyAddress_Box" v-for="(item,index) in myAddressList" :key="index">
			<view class="MyAddress_Item" >
				<view class="AddressTop">
					{{ item.regions }}
				</view>
				<view class="AddressBottom">
					{{item.receiveAddress}}
				</view>
				<view class="UserInfo">
					<view class="UserName">
						{{ item.receiveName }}
					</view>
					<view class="Email">
						{{ item.mailbox }}
					</view>
				</view>


			</view>
		</view>

		<!-- 新增地址按钮 -->
		<view class="AddBtn" v-if="myAddressList.length <= 0">
			<view class="AddBtnBox" @click="handlerBtn">
				{{BntText}}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref,onMounted } from 'vue'
	import { AddressDetail } from "@/api/Address.js"
	
	let myAddressList = ref([])
	// 按钮文字
	const BntText = ref<string>("新建收货地址")
	// 按钮事件
	const handlerBtn = () => {
		uni.navigateTo({
			url:'/pages/address/address'
		})
	}
	const getAddressDetail = async()=>{
		const res:any = await AddressDetail();
		if(res && res.code == 200){
			myAddressList.value = res.rows;
		}
	}
	onMounted(() => {
		getAddressDetail();
	})
	
</script>

<style lang="less">
	.container {
		min-height: 100vh;
		min-width: 100vw;
		background-color: #FFFFFF;

		// 我的地址列表
		.MyAddress_Box {
			width: 100vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 30rpx;
			// 地址
			.MyAddress_Item {
				width: 690rpx;
				border-bottom: 1px solid #e6e6e6;
				padding-bottom: 20rpx;
				.AddressTop {
					color: #000000;
					font-family: "PingFang SC";
					font-size: 20rpx;
					font-style: normal;
					font-weight: 400;
					opacity: 0.5;
				}

				.AddressBottom {
					margin-top: 8rpx;
					color: #000000;
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-style: normal;
					font-weight: 500;
					line-height: 40rpx;
					opacity: 0.9;
				}

				.UserInfo {
					display: flex;
					align-items: center;
					margin-top: 8rpx;
					color: #000000;
					font-family: "PingFang SC";
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					opacity: 0.9;
					.Email{
						margin-left: 32rpx;
					}
				}
			}
		}

		// 新增地址按钮
		.AddBtn {
			position: fixed;
			width: 100vw;
			height: 88rpx;
			bottom: 0rpx;
			margin-bottom: 68rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.AddBtnBox {
				width: 694rpx;
				height: 88rpx;
				border-radius: 44rpx;
				background-color: #E5353F;
				line-height: 88rpx;
				text-align: center;
				font-size: 40rpx;
				font-weight: 400;
				color: #fff;
			}
		}
	}
</style>